<template>
  <div class="counter-container">
    <el-card class="counter-card">
      <template #header>
        <div class="card-header">
          <span>计数器示例</span>
        </div>
      </template>
      <div class="card-content">
        <div class="counter-display">
          <h3>当前计数：{{ count }}</h3>
          <p class="counter-desc">
            这个计数器与主应用共享状态，在任意应用中增加计数都会同步更新。
          </p>
        </div>
        <div class="counter-actions">
          <el-button type="primary" size="large" @click="increment">
            <el-icon class="icon"><Plus /></el-icon>
            增加计数
          </el-button>
        </div>
      </div>
    </el-card>

    <el-card class="navigation-card">
      <template #header>
        <div class="card-header">
          <span>导航</span>
        </div>
      </template>
      <div class="card-content">
        <el-button type="primary" @click="$router.push('/')"
          >返回首页</el-button
        >
        <el-button type="success" @click="$router.push('/about')"
          >关于页面</el-button
        >
      </div>
    </el-card>
  </div>
</template>

<script type="module" setup>
import { computed } from "vue";
import { useStore } from "vuex";
import { Plus } from "@element-plus/icons-vue";

const store = useStore();
const count = computed(() => store.state.count);

const increment = () => {
  store.commit("increment");
};
</script>

<style lang="scss" scoped>
.counter-container {
  padding: 20px;
  .el-card {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .card-header {
    font-weight: bold;
  }
  .counter-card {
    .counter-display {
      text-align: center;
      margin-bottom: 30px;
      h3 {
        font-size: 24px;
        color: $primary-color;
        margin-bottom: 10px;
      }
      .counter-desc {
        color: $text-regular;
        font-size: 14px;
      }
    }
    .counter-actions {
      display: flex;
      justify-content: center;
      .icon {
        margin-right: 5px;
      }
    }
  }
  .navigation-card {
    .card-content {
      display: flex;
      gap: 15px;
      justify-content: center;
    }
  }
}
</style>
